<template>
  <div class="shopping">
    <!-- <div>{{$refs.shoppingCheckbox.length}}</div> -->
    <ShoppingNav><div slot="center" class="shoppingnav">购物车({{ $store.state.shopping.img.length }}) </div></ShoppingNav>
    <!-- <div>{{this.$store.state.shopping}}</div> -->
    <!-- v-for="(item,index) in this.$store.state.shopping" :key='index' -->
   <ShoppingScroll class='shoppingscrollsss'>
    <div class="shoppings">
       
      <div
        v-for="(item, index) in this.$store.state.shopping.img"
        :key="index"
        class="shoppingContent">
        <ShoppingCheckbox ref="shoppingCheckbox" @click.native="shoppingcheckbox" @shoppingreduce='shoppingreduce'></ShoppingCheckbox>
        <div class="shoppingImg"><img :src="item" /></div>
        <p>{{ $store.state.shopping.content[index] }}</p>
        <div class="shoppingcomputed">
          <span>{{ $store.state.shopping.price[index] }}</span>
          <!-- <button @click='computed(-1)'>-</button><span class='span'>{{obj.index}}</span><button @click='computed(+1)'>+</button> -->
          <Computed ref="computed" @reduce='shoppingreduce' @componentreduce='shoppingreduce'></Computed>
        </div>
      </div>
    </div>
    </ShoppingScroll>
    <ShoppingBottom :shoppingindex="reduceindex" :isTrues="shoppingtrue" @shoppingBottomisTrue="shoppingBottomisTrue" :number="reduce"
                       @spanclick='shoppingreduce'></ShoppingBottom>
  </div>
</template>

<script>
import ShoppingScroll from '../../components/common/BScroll/BScroll.vue'
import ShoppingNav from "../../components/content/nav/nav.vue";
import Computed from "../../components/common/component.vue";
import ShoppingCheckbox from "./shoppingcheckbox.vue";
import ShoppingBottom from "./shoppingBottom.vue";

export default {
  data() {
    return {
      
      arr: [],
      arrindex: [],
      reduceindex:0,

      reduce: 0,

      price: null,
      shoppingTrue: true,
      shoppingtrue: true,
    };
  },

  components: {
    ShoppingNav,
    Computed,
    ShoppingCheckbox,
    ShoppingBottom,
     ShoppingScroll
  },
  methods: {
    shoppingBottomisTrue(checkboxtrue) {
      this.$refs.shoppingCheckbox.forEach((element) => {
        return (element.isTrue = checkboxtrue);
      });
    },
    shoppingcheckbox() {
      this.arr = this.$refs.shoppingCheckbox.filter((item, index) => {
        // console.log(item);
        //    console.log(index)
        return item.isTrue === false;
      });
      if (this.arr.length === 0) {
        this.shoppingtrue = true;
      } else {
        this.shoppingtrue = false;
      }
    
      
    },
    shoppingreduce(){
       this.arrindex = [];
      this.$refs.shoppingCheckbox.filter((item, index) => {
        if (item.isTrue === true) {
          this.arrindex.push(index);
        }
        //    return item.isTrue===true
      });
      this.reduce = 0;
      this.reduceindex = 0;
      for (let item of this.arrindex) {
        //    for(let items of this.$refs.computed){
        this.price = parseInt(this.$store.state.shopping.price[item].replace("￥", "")) * this.$refs.computed[item].countindex;
        this.reduceindex += this.$refs.computed[item].countindex
        //    }
        this.reduce += this.price;
      }
      // console.log(this.reduceindex)
      //    console.log(this.$store.state.shopping.price)
    //   console.log(this.$refs.computed);

    //   console.log(this.reduce);
    //   console.log(this.arrindex);
   }
  },
  activated(){
       this.reduce = 0;
      for(let item of this.$store.state.shopping.price){
          this.reduce += parseInt(item.replace("￥", ""))
      }
      this.reduceindex=this.$store.state.shopping.price.length;
      
  }
   

  //    mounted(){
  //        if(this.arr.length===0){
  //              this.shoppingtrue=true;
  //          }else{
  //             this.shoppingtrue=false
  //          }
  //    }
  //    computed(){
  //        if(this.countindex===1){
  //          document.getElementById('btn').disabled=true;
  //         //    this.countindex+indexs
  //        }else{
  //             document.getElementById('btn').disabled=false;
  //        }
  //    }
  //    methods:{
  //        computed(indexs){
  //         //    this.countindex=this.obj.index;
  //         //    this.countindex+=index
  //         (function(){
  //             obj.index+=indexs
  //         })(this.obj)
  //        }
  //    }
};
</script>

<style>
.shoppingscrollsss{
  overflow: hidden;
  height: calc(100% - 143px);
  /* height: 400px; */
}
.shopping{
  height: 100vh;
}
.shoppingcomputed {
  display: flex;
  justify-content: space-between;
}
.shoppings {
  overflow: hidden;
  margin-top: 10px;
  
}
.shoppingnav {
  width: 100%;
  background-color: #f00;
  color: #fff;
}
.shoppingImg {
  /* display: flex; */
  position: relative;
  width: 100px;
}
/* .shoppingImg input{
        position: absolute;
        display: block;
        width: 50px;
    }    */
.shoppingContent {
  position: relative;
  clear: both;
  overflow: hidden;
  margin-bottom: 10px;
  padding-left: 30px;
}
.shoppingImg img {
  width: 100%;
  float: left;
  vertical-align: middle;
}
</style>